
$( function(){
    // 顶部广告
    $(".adv-close").click(function(){
        $(".top-adv").css({ display : "none" });
    })

    // search样式
    $(".search-keyword").attr({
        value : "热水器精选"
    })
    $(".search-keyword").focus(function(){
        $(".search-keyword").attr({
            value : ""
        })
        $(".search-res").css({
            display : "block"
        })
    })
    $(".search-keyword").blur(function(){
        $(".search-res").css({
            display : "none"
        })
    })

    // search 模糊搜索
    $(".search-keyword").on("input", function(e){
        let options = {
            url : "https://www.baidu.com/sugrec",
            data : {
                prod : "pc",
                from : "pc_web",
                wd : e.delegateTarget.value, 
            },
            dataType : "jsonp",
            jsonp : "cb",
        }
        let def = $.ajax( options );
        def.done( function( data ){
            $(".search-res ul").empty();
            let list = "";
            // 判断对象不为空，以及data.g不为undefined(可能没有搜索结果)
            if( JSON.stringify(data) != "{}" && data.g != undefined){
                data.g.forEach(element => {
                    list += `
                        <li>${element.q}</li>
                    `
                });
                $(".search-res ul").append(list);
            }else
                $(".search-res ul").empty();
        })
    })

    $(".search-res-close").click(function(){
        $(".search-res").css({
            display : "none"
        })
    })

    // nav
    $(".category-list").each(function(i){
        $(this).mouseenter(function(){
            // 根据li的位置设置top值，使div出现在同一个位置上
            let top = -(parseInt($(this).css("height")) * i) -1;

            $(this).css({ 
                backgroundColor : "#f3f3f3"
            });
            $(this).children(".cat-det").css({ 
                display : "block",
                top : top + "px"
            });
        })
        $(this).mouseleave(function(){
            $(this).css({ 
                backgroundColor : "#ffffff"
            });
            $(this).children(".cat-det").css({ 
                display : "none" 
            });
        })
    })

    // banner
    var index = 0 ; 
    function changeItem() {
        $(".slider").each(function (i) {
            $(this).removeClass("active");
            if(i==index){
                $(this).addClass("active");
            }
        })
        $(".page-item").each(function (i) {
            $(this).removeClass("active");
            if(i==index){
                $(this).addClass("active");
            }
        })
    }

    function handlerPrevClick(){
          if( index === 0 ){
                index = 7; 
          }else{
                index --;
          }
          changeItem();
    }

    function handlerNextClick(){
          if( index >= 7 ){
                index = 0; 
          }else{
                index ++;
          }
          changeItem();
    }     
    
    function autoPlay(){
          autoPlay.t = setInterval( function(){
                handlerNextClick()
          } ,  2000)
    }     

    function stopPlay(){
          clearInterval( autoPlay.t );
    }

    $(".banner-wrapper").mouseenter(function(){
        stopPlay();
        $(".button-prev").css({
            display: "block"
        })
        $(".button-next").css({
            display: "block"
        })
    });
    $(".banner-wrapper").mouseleave(function(){
        autoPlay();
        $(".button-prev").css({
            display: "none"
        })
        $(".button-next").css({
            display: "none"
        })
    });

    function handlerIndexOver(){
        index = $(this).attr("nav-index");
        changeItem();
    }

    autoPlay()
    // 先off取消之前添加的事件，防止事件叠加
    // 给btn添加click事件
    $(".button-prev").off("click").on("click", handlerPrevClick);
    $(".button-next").off("click").on("click", handlerNextClick);
    // 给banner-nav添加mouseover事件
    $(".page-item").each(function () {
        $(this).on("mouseover", handlerIndexOver);
    })
})